import React from "react";
import { Box, Flex, Text, Switch } from "@chakra-ui/react";

interface SwitchSettingItemProps {
  title: string;
  description: string;
  isChecked: boolean;
  onChange: () => void;
  hasBorder?: boolean;
}

const SwitchSettingItem: React.FC<SwitchSettingItemProps> = ({
  title,
  description,
  isChecked,
  onChange,
  hasBorder = false,
}) => (
  <Flex
    align="center"
    justify="space-between"
    py="12px"
    borderBottom={hasBorder ? "1px solid rgba(255, 255, 255, 0.1)" : "none"}
  >
    <Box>
      <Text
        color="white"
        fontFamily="Microsoft YaHei"
        fontSize="14px"
        fontWeight={700}
        lineHeight="normal"
      >
        {title}
      </Text>
      <Text
        color="white"
        fontFamily="Microsoft YaHei"
        fontSize="13px"
        fontWeight={400}
        lineHeight="normal"
        opacity="0.7"
      >
        {description}
      </Text>
    </Box>
    <Switch isChecked={isChecked} onChange={onChange} colorScheme="blue" />
  </Flex>
);

export default SwitchSettingItem;
